<template>
  <el-collapse>
    <el-collapse-item title="变量配置">
      <text-add-button text="创建变量" @click="handleAdd"></text-add-button>
      <el-table :data="variables" v-if="variables.length">
        <el-table-column label="变量名" prop="id" align="center"></el-table-column>
        <el-table-column label="变量描述" prop="name" align="center"></el-table-column>
        <el-table-column label="变量类型" prop="itemSubjectRef" align="center"></el-table-column>
        <el-table-column label="出入参" prop="inoutput" align="center"></el-table-column>
        <el-table-column label="操作" align="center" min-width="140" fixed="right">
          <template #default="scope">
            <text-edit-button @click="handleEdit(scope.row)">编辑</text-edit-button>
            <text-delete-button @click="handleDelete(scope.row)">删除</text-delete-button>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
  </el-collapse>

  <drag-dialog v-model="visible" title="变量配置">
    <el-form label-position="right" label-width="100">
      <el-form-item label="变量名">
        <el-input v-model="currentVariable.id" />
      </el-form-item>
      <el-form-item label="变量描述">
        <el-input v-model="currentVariable.name" />
      </el-form-item>
      <el-form-item label="变量类型">
        <el-select v-model="currentVariable.itemSubjectRef">
          <el-option v-for="opt in typeOptions" :key="opt" :label="opt" :value="opt" />
        </el-select>
      </el-form-item>
      <el-form-item label="变量形式">
        <el-checkbox-group v-model="currentVariable.inoutput">
          <el-checkbox value="in">入参</el-checkbox>
          <el-checkbox value="out">出参</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="入参时必传">
        <el-switch v-model="currentVariable.required" />
      </el-form-item>
    </el-form>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="cancel" />
    </template>
  </drag-dialog>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { GlobalVariable, getGlobalVariablesValue, setGlobalVariableValue, updateGlobalVariableValue, deleteGlobalVariableValue } from '@wf/components/bpmnjs/bo-utils/globalVariablesUtil';

export default defineComponent({
  name: 'ElementVariables',
  data() {
    return {
      type: 'add',
      variables: [],
      visible: false,
      currentVariable: {} as GlobalVariable,
      typeOptions: ['string', 'boolean', 'datetime', 'double', 'int', 'long']
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.variables = getGlobalVariablesValue(this.getActive).map((item) => {
        return {
          ...item,
          inoutput: item.$attrs.inoutput,
          required: item.$attrs.required
        };
      });
    },
    // 创建变量
    handleAdd() {
      this.type = 'add';
      this.currentVariable = {
        inoutput: []
      };
      this.visible = true;
    },
    // 编辑变量
    handleEdit(row) {
      this.type = 'edit';
      if (row.inoutput) {
        row.inoutput = row.inoutput.split(',');
      } else {
        row.inoutput = [];
      }
      this.currentVariable = { ...row };
      this.visible = true;
    },
    // 删除变量
    handleDelete(row) {
      deleteGlobalVariableValue(this.getActive, row);
      this.init();
    },
    submit() {
      this.currentVariable.inoutput = this.currentVariable.inoutput.join(',');
      if (this.type == 'add') {
        setGlobalVariableValue(this.getActive, this.currentVariable);
      } else {
        updateGlobalVariableValue(this.getActive, this.currentVariable);
      }
      this.init();
      this.cancel();
    },
    cancel() {
      this.visible = false;
    }
  }
});
</script>